import React, { useRef, useLayoutEffect, useState } from "react";
import { Tooltip, type TooltipProps } from "antd";

import "./index.less";

const Comp = (props: TooltipProps) => {
    const { children, ...other } = props;
    const ref: any = useRef();
    const [isShow, setIsShow] = useState(false);

    useLayoutEffect(() => {
        if (ref.current.scrollWidth > ref.current.offsetWidth) {
            setIsShow(true);
        } else {
            setIsShow(false);
        }
    }, []);

    return (
        <div ref={e => ref.current = e} className="my-hover-tooltip">
            {
                isShow ? (
                    <Tooltip
                        {...other}
                        placement={other.placement || 'topLeft'}
                        mouseEnterDelay={other.mouseEnterDelay || 0.5}
                        title={children}
                    >{children}</Tooltip>
                ) : children
            }
        </div>
    );
};

export default Comp;